<template>
  <div class="editPass">
    <div class="editPass-box">
      <div class="editPass-main">
        <div class="editPass-form-box">
          <div>
            <div class="steps-box">
              <el-steps :active="forgetStore.getTabState + 1">
                <el-step title="验证您的信息"></el-step>
                <el-step title="请输入您的新密码"></el-step>
                <el-step title="修改结果"></el-step>
              </el-steps>
            </div>
            <keep-alive>
              <component :is="componentList[forgetStore.getTabState]" />
            </keep-alive>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
// unref 基于 ref 一个 {} ， {} 会被 reactive 二次处理，unref(ref({})) 返回的是响应式的 {}
import { computed, unref, ref, onMounted } from 'vue';
import { onBeforeRouteLeave } from 'vue-router'

import VerificationForm from './component/VerificationForm.vue';
import NewsPasswordForm from './component/NewsPasswordForm.vue';
import FinishedForm from './component/FinishedForm.vue';
import { useForgetStore } from './store';
import { useUserStoreHook } from '@/store/modules/user';

const forgetStore = useForgetStore();
const userStore = useUserStoreHook();


const componentList = [VerificationForm, NewsPasswordForm, FinishedForm];
onMounted(() => {
  // forgetStore.RESET_STATE();
});
onBeforeRouteLeave(() => {
  console.log('routerLeave')
  userStore.resetToken()
})

</script>
<style lang="scss" >
@import '@/styles/index';

.editPass {
  background-image: url('/src/assets/index/login-bg1.png');
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;

  .editPass-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .editPass-main {
      display: flex;

      .editPass-form-box {
        background: #ffffff;
        border: 0.3px solid #b9b9b9;
        border-radius: 24px;
        height: 620px;
        width: 580px;
        border-radius: 24px;
        box-sizing: border-box;
        padding: 32px 50px;

        .steps-box {
          margin-top: 50px;
          margin-bottom: 80px;
        }

        .el-form-item {
          .el-form-item__label {
            font-size: 18px !important;
          }
        }

        .editPass-form {}
      }
    }
  }
}
</style>
